<template>
	<io-popup :visible="show" title="授权登录" @close="onClosePopAuthPhone">
		<view class="auth-phone">
			<view class="auth-phone-desc">{{ desc }}</view>
			<view class="auth-phone-row">
				<button class="auth-phone-row-cancel" @tap="onClosePopAuthPhone">取消</button>
				<button v-if="platform.isWeapp()" class="auth-phone-row-confirm" openType="getPhoneNumber"
					@getphonenumber="onGetPhoneNumber">授权</button>
				<button v-if="platform.isAlipay()" class="auth-phone-row-confirm" openType="getAuthorize"
					scope="phoneNumber" @GetAuthorize="onGetPhoneNumber">授权</button>
			</view>
		</view>
	</io-popup>
</template>
<script lang="ts" setup>
	import { userApi } from '@/utils/userApi'
	import { platform } from '@/utils/platform';
	import { computed } from 'vue';
	// import IoPopup from '@/components/io-popup/io-popup';

	defineProps({
		show: {
			type: Boolean,
			default: false,
		},
	})
	const emits = defineEmits(['success', 'fail', 'close']);

	const desc = computed(() => {
		if (platform.isWeapp()) {
			return '使用您微信绑定的手机号进行登陆';
		}
		if (platform.isAlipay()) {
			return '使用您支付宝绑定的手机号进行登陆';
		}
		return '使用绑定的手机号进行登陆';
	})
	const onGetPhoneNumber = ({ detail } : any) => {
		userApi.bindMobile(detail).then(mobile => {
			emits('success', mobile);
		}).catch(e => {
			emits('fail', e);
		})
	}
	//取消授权
	const onClosePopAuthPhone = () => {
		uni.showModal({
			title: "提示",
			content: "取消授权会使部分服务无法使用，或页面信息展示不完整",
			confirmText: "重新授权",
			cancelText: "知道了",
			success: (res) => {
				console.log('弹窗确认', res);
				if (res.confirm) {

				} else if (res.cancel || !res.confirm) {
					emits('close', '取消授权');
				}
			}
		})
	}
</script>
<style lang="scss">
	.auth-phone {
		display: flex;
		flex-direction: column;

		&-desc {
			display: flex;
			justify-content: center;
			text-align: center;
			line-height: 2.5;
		}

		&-row {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			padding: 10px;

			&-cancel {
				width: 40%;
				line-height: 23px;
				text-align: center;
				font-size: 16px;
				background: white;
				border-radius: 23px;
				padding: 10px 0;
				border: 1px solid #e0e1e2;
			}

			&-confirm {
				width: 40%;
				line-height: 23px;
				text-align: center;
				color: white;
				font-size: 16px;
				background: var(--primary-color);
				border-radius: 23px;
				padding: 10px 0;

				&:hover {
					background-color: var(--primary-color-active);
					border: 1px solid var(--primary-color-active);
				}
			}
		}
	}
</style>